<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="css/mui.min.css">
		
		<link rel="stylesheet" type="text/css" href="css/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="css/default.css" />
		<link rel="stylesheet" type="text/css" href="css/style1.css" />
		<style type="text/css">
			.m-icon-bluev {
				display: inline-block;
				width: 10px;
				height: 10px;
				background: url('images/iconfont-tianjia.png')no-repeat;
				position: absolute;
				left: 28px;
				bottom: 13px;
			}
			
			.tianjian:before {
				width: 24px;
				height: 48px;
				position: absolute;
				bottom: 0;
				right: 10px;
				background: url('images/iconfont-tianjia.png') no-repeat bottom right /24px 48px;
				content: '';
				-webkit-transform: scaleY(.5);
				transform: scaleY(.5);
			}
			
			.touxiang:before {
				width: 24px;
				height: 40px;
				position: absolute;
				bottom: 0;
				left: 30%;
				background: url('images/titleimg.png') no-repeat bottom right /13px 43px;
				content: '';
				-webkit-transform: scaleY(.5);
				transform: scaleY(.5);
			}
			.top40{
				top: 40px;
			}
			/*.hps-box .hps-tab-border{
				position: relative;
			}*/
			.hps-box .hps-tab-border::before{
			/*	border-bottom: 1px solid rgba(255,255,255,0.95);*/
				/*position: absolute;
				content: '';
				width: 100%;
			bottom: 0;
			left: 0;*/
			
			
			}
			/*.mui-slider {
				margin-top: 50px;
			}*/
				.mui-control-content {
				background-color: white;
				min-height: 500px;
			}
			.mui-control-content .mui-loading {
				margin-top: 50px;
			}
			.imgsma-peopl {
    height: 24px !important;
    width: 24px !important;
    border-radius: 12px;
}
.hps-gray10{
	height: 10px;
	background: #f7f7f7;
	border-bottom: 1px solid #DBE4F0;
}
.hps-mgt-bd{
	margin-top: 10px;
	
}
		</style>
	</head>

	<body>
		
		<div class="mui-content">
			<div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<a class="mui-control-item" href="#item1mobile">发现</a>
					<a class="mui-control-item" href="#item2mobile">关注</a>
					
				</div>
				<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6"></div>
				<div class="mui-slider-group">
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
						<div id="scroll1" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<!--今日涨跌-->
									<h4 class="black-small listitle">今日涨跌</h4>
						<div class="fudong">
						
							<ol class="flexbox" id='hangqing'>
							</ol>
						</div>
					<!--推荐榜单-->
					<div class="hps-gray10"></div>
				<h4 class="black-small listitle hps-mgt-bd" >推荐榜单</h4>
				<!--数据列表-->
				<ul class="mui-table-view mui-card-content" id="tabcell">
						<!--<li class="mui-table-view-cell lists1">
							<a href="coindetail2.html">
								<h3 class="blacker-big">每日币市龙虎榜</h3>
								<section>
									<dl class="leftslide fl">
										<dd class="blacker-small">EOS领涨<span class="green-small">+2.39%</span></dd>
										<dd>
											<span class="grey-light">总数：3</span>
											<span class="grey-light">上涨：2</span>
											<span class="grey-light">下跌：1</span>
										</dd>
										<dd>
											<img src="http://placehold.it/40x30" alt="" class='imgsma-peopl' />
											<i class="m-icon-bluev"></i>
											<span class="blacker-small">金木研</span>
											<span class="grey-light">创建</span>
										</dd>
									</dl>
	
									<dl class='rightslide fr'>
										<dd class="tr blacker-small">平均涨跌</dd>
										<dd class="tr green-big">+1.29%</dd>
										<dt>
								<p>
									<span class="iconfont icon-yanjing"></span>
									<span class='grey-smaller'>2100</span>
									<span class="iconfont icon-xingxing"></span>
									<span class="grey-smaller">1920</span>
								</p>
							</dt>
									</dl>
								</section>
							</a>
						</li>
						-->
					</ul>				
							</div>
						</div>
					</div>
					<div id="item2mobile" class="mui-slider-item mui-control-content">
						<div id="scroll2" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<div class="mui-loading">
									<div class="mui-spinner">
													  
									<ul class="mui-table-view">
	                <li class="mui-table-view-cell lists1">
	                	<h3 class="blacker-big">我关注的榜单</h3>
	                	<section>
			        		<dl class="leftslide fl">
			        			<dd class="blacker-small">EOS领涨<span class="green-small">+2.39%</span></dd>
			        			<dd>
				        			<span class="grey-light">总数：3</span>
				        			<span class="grey-light">上涨：2</span>
				        			<span class="grey-light">下跌：1</span>
			        			</dd>
			        			<dd>
				        			<img src="http://placehold.it/40x30" alt="" class='imgsma-peopl'/>
				        			<span class="blacker-small">金木研</span>
				        			<span class="grey-light">创建</span>
			        			</dd>
			        		</dl>
			        		
		        			<dl class='rightslide fr'>
		        				<dd class="tr blacker-small">平均涨跌</dd >
		        				<dd class="tr green-big">+1.29%</dd>
		        				<dt>
		        					<p>
		        						<span class="iconfont icon-yanjing"></span>
		        						<span class='grey-smaller'>2100</span>
		        						<span class="iconfont icon-xingxing"></span>
		        						<span class="grey-smaller">1920</span>
		        					</p>
		        				</dt>
		        			</dl>
        				</section>
	                </li>
	                 <li class="mui-table-view-cell lists1">
	                	<h3 class="blacker-big">我关注的榜单</h3>
	                	<section>
			        		<dl class="leftslide fl">
			        			<dd class="blacker-small">EOS领涨<span class="green-small">+2.39%</span></dd>
			        			<dd>
				        			<span class="grey-light">总数：3</span>
				        			<span class="grey-light">上涨：2</span>
				        			<span class="grey-light">下跌：1</span>
			        			</dd>
			        			<dd>
				        			<img src="http://placehold.it/40x30" alt="" class='imgsma-peopl'/>
				        			<span class="blacker-small">金木研</span>
				        			<span class="grey-light">创建</span>
			        			</dd>
			        		</dl>
			        		
		        			<dl class='rightslide fr'>
		        				<dd class="tr blacker-small">平均涨跌</dd >
		        				<dd class="tr green-big">+1.29%</dd>
		        				<dt>
		        					<p>
		        						<span class="iconfont icon-yanjing"></span>
		        						<span class='grey-smaller'>2100</span>
		        						<span class="iconfont icon-xingxing"></span>
		        						<span class="grey-smaller">1920</span>
		        					</p>
		        				</dt>
		        			</dl>
        				</section>
	                </li>
	               </ul>
	        
													  
													  
													  
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			
			

	
		<!--下拉刷新容器-->
		
		<script src="js/mui.min.js"></script>
		<script src="js/jquery-2.1.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="js/config.js" charset="utf-8"></script>
		<script src="./js/util.js"></script>
		<script>
			mui.init({
				pullRefresh: {
					container: '#scroll2',
					down: {
						height: 50, //可选,默认50.触发下拉刷新拖动距离,
//						auto: true, //可选,默认false.首次加载自动下拉刷新一次
						style:'circle',
						callback: pulldownRefresh
					},
					up: {
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});
			var pageNumber = 1;
			getmk();
			$('#tabcell').html('');
			gethlist();

			function pulldownRefresh() {
				
				
				
				console.log("下拉刷新");
				getmk();
// 				pageNumber = 1;
// 				$('#tabcell').html('');
// 				gethlist();
// 				mui('#scroll2').pullRefresh().endPulldownToRefresh(); //refresh completed
// 				mui.toast("刷新完成");
			}

			function pullupRefresh() {
				console.log("上拉加载");
				pageNumber = pageNumber + 1;
				gethlist();
				mui('#scroll2').pullRefresh().endPullupToRefresh(); //参数为true代表没有更多数据了。
			}

			function getmk() {
				//今日数据
				util.postMK("/api/market/getmk",{}, function(cData){
					$('#hangqing').html("");
					var tabcell;
					for(var i = 0; i < cData.length; i++) {
						var priceCnyStr = cData[i].priceCny;
						var priceCny = priceCnyStr.toFixed(4);
						var perce = cData[i].percent24h;
						var cls = "green-small";
						var pricls = "green-big";
						if(perce < 0) {
							cls = "red-small";
							pricls = "red-big";
						}
						hangqing = '<li><p><span class="black-small">' + cData[i].symbol +
							'</span><span class="' + cls + '">' + '&nbsp&nbsp' +
							cData[i].percent24h + '%</span></p><p><span class="' + pricls + '">' +
							cData[i].price + '</span></p><p><span class="black-smaller">' +
							priceCny + '</span></p></li>';
						$('#hangqing').append(hangqing);
					}
				});
			}

			//初始数据
			function gethlist() {
				//推荐榜单
				$.ajax(mkurl + '/api/market/gethlist', {
					data: {
						pageNumber: pageNumber,
						pageSize: 10
					},
					dataType: 'json',
					type: 'post',
					success: function(data) {
						if(data.status == 1) {
							var cData = data.result.result;
							var tabcell;
							if(cData != null && cData != '') {
								for(var i = 0; i < cData.length; i++) {
									var fun = 'toListDetail("' + cData[i].hid + '")';
									var brcont = cData[i].browseCount;
									if(brcont == null || brcont == "") {
										brcont = 0;
									}
									var followCount = cData[i].followCount;
									tabcell = '<li class="mui-table-view-cell lists1" id="coin_list"' + [i] +
										'><a onclick=' + fun + '><h3 class="blacker-big">' + cData[i].title +
										'</h3><section><dl class="leftslide fl"><dd class="blacker-small">' + cData[i].rHUom +
										'&nbsp;<span class="green-small">' + cData[i].rhAverage +
										'%</span></dd><dd><span class="grey-light">总数:' + cData[i].totalCount +
										'</span><span class="grey-light">上涨:' + cData[i].rCount +
										'</span><span class="grey-light">下跌：' + cData[i].fCount +
										'</span></dd><dd><img src="images/header.png" alt="" class="imgsma-peopl" />' +
										'<i class="m-icon-bluev"></i><span class="blacker-small">' + cData[i].nickname +
										'</span><span class="grey-light">创建</span></dd></dl><dl class="rightslide fr">' +
										'<dd class="tr green-big"> <span class="hps-tit1">平均涨跌</span>' + cData[i].averageRF +
										'%</dd><dt><p class="mui-text-right"><span class="iconfont icon-yanjing org-75b"></span>' +
										'<span class="grey-smaller hps-mr4">' + brcont + '</span><span class="iconfont icon-xingxing org-f0b"></span>' +
										'<span class="grey-smaller">' + followCount + '</span></p></dt></dl></section></a></li>';
									$('#tabcell').append(tabcell);
								}
							} else {
								mui.toast("没有更多了");
								mui('#pullrefresh').pullRefresh().endPullupToRefresh(true); //参数为true代表没有更多数据了。
							}

						} else {
							alert(2);
						}
					},
					error: function(xhr, type, errorThrown) {
						//异常处理；
						console.log(type);
					}
				});
			}

			function toListDetail(hid) {
				$.ajax(userurl + '/api/user/app/uhit', {
					data: {
						hid: hid
					},
					dataType: 'json',
					type: 'post',
					async: true,
					success: function(data) {
						//console.log('success');
					},
					error: function(xhr, type, errorThrown) {
						console.log(type);
					}
				});
				if(hid != null && hid != "") {
					mui.openWindow({
						url: 'coindetail2.html',
						id: 'coindetail2',
						extras: {
							hid: hid
						}
					});
				} else {
					mui.toast('未知榜单', {
						duration: '2000ms',
						type: 'div'
					})
				}
			}
			//			if (mui.os.plus) {
			//				mui.plusReady(function() {
			//					setTimeout(function() {
			//						mui('#pullrefresh').pullRefresh().pullupLoading();
			//					}, 10);
			//
			//				});
			//			} else {
			//				mui.ready(function() {
			//					mui('#pullrefresh').pullRefresh().pullupLoading();
			//				});
			//			}
		</script>
		<script>
			mui.init({
				swipeBack: false
			});
			(function($) {
				$('.mui-scroll-wrapper').scroll({
					 indicators: false //是否显示滚动条
				});
				var html2 = '<ul class="mui-table-view"><li class="mui-table-view-cell">第二个选项卡子项-1</li><li class="mui-table-view-cell">第二个选项卡子项-2</li><li class="mui-table-view-cell">第二个选项卡子项-3</li><li class="mui-table-view-cell">第二个选项卡子项-4</li><li class="mui-table-view-cell">第二个选项卡子项-5</li></ul>';
				var item2 = document.getElementById('item2mobile');
				document.getElementById('slider').addEventListener('slide', function(e) {
					if (e.detail.slideNumber === 1) {
						if (item2.querySelector('.mui-loading')) {
							setTimeout(function() {
								item2.querySelector('.mui-scroll').innerHTML = html2;
							}, 500);
						}
					} 
				});
			})(mui);
		</script>
	</body>

</html>